<template>
  <!-- <div id="sear" style="background: #fff; padding-top: 10px">
    <van-sticky z-index="111">
      <div id="search">
        <input
          type="text"
          class="search"
          v-model.trim="keyVal"
          placeholder="请输入关键词在排行榜中搜索"
          @keyup.enter="$emit('returnBack', keyVal)"
          @input="$emit('inputValue', keyVal)"
        />
        <img
          src="@/assets/two/search-nohover.png"
          class="searchicon"
          name="search"
          @click=" $emit('returnBack', keyVal)"
          v-if="!imgBox"
        />
        <img
          src="@/assets/two/search.png"
          class="searchicon"
          name="search"
          @click=" $emit('returnBack', keyVal)"
          v-if="imgBox"
        />
      </div>
    </van-sticky>
  </div> -->
  <van-sticky offset-top="0">
    <div class="search_container">
      <div class="search_box">
        <input
          type="text"
          v-model.trim="keyVal"
          placeholder="请输入关键词在排行榜中搜索"
          @keyup.enter="$emit('returnBack', keyVal)"
          @input="$emit('inputValue', keyVal)"
        />
        <i class="active" v-if="imgBox" @click=" $emit('returnBack', keyVal)"></i>
        <i v-else @click=" $emit('returnBack', keyVal)"></i>
      </div>
    </div>
  </van-sticky>
</template>

<script>
export default {
  data() {
    return {
      imgBox: false,
      keyVal:''
    };
  },
  props: ['active','valueSerach'],
  model: {
    prop: 'valueSerach',
    event: 'returnBack'
  },
  computed: {},
  created() {
    if(!this.$route.meta.isFirst){  //如果是刷新当前页面，测需要传入搜索关键字，否则valueSerach为空；
      this.keyVal = this.$route.query.name;
    }
  },
  mounted() {},
  watch: {
    valueSerach(newvalue) {
      this.keyVal = newvalue;
      if (!newvalue) {
        //输入框为空时
        this.imgBox = false;
        this.$emit('returnBack1', this.valueSerach);
      } else {
        this.imgBox = true;
      }
    },
    // active(newvalue) {
    //   this.valueSerach = '';
    // }
  },
  methods: {
    // 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus
    animateWidth(name, type) {
      if (name == 'company_name') {
        if (type == 'blur') {
          this.imgBox = false;
        } else {
          this.imgBox = true;
        }
      }
    },
    bodyOverflowFn(val){
      let bodyEl = document.querySelector('body');
      if(!val){
        // bodyEl.styles.height = '10vh';
        bodyEl.classList.add('van-overflow-hidden');
      }else{
        bodyEl.classList.remove('van-overflow-hidden');
      }
    },
  },
  components: {}
};
</script>

<style scoped lang="stylus">
@import '~@/common/common.styl';
.search_container{
  // position: fixed;
  width: 100%;
  padding: rem(20) rem(30) rem(10);
  box-sizing: border-box;
  background-color: #fff;
}
.search_box{
  position relative;
  height: rem(68);
  padding-right:rem(98);
  background-color: #f1f1f1;
  border-radius: rem(34);
  overflow: hidden;
  input{
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    font-size: rem(28);
    color: #222;
    background-color: transparent;
    text-indent: 1.1em;
  }
  input:-ms-input-placeholder {
    color: #b5b5b5;
  }
  i{
    position: absolute;
    top:0;
    right: 0;
    display: block;
    width: rem(98);
    height: 100%;
    // bgp('~@/assets/two/search.png');
    bgp('~@/assets/two/search-nohover.png');
    background-size: rem(30) rem(30);
    &.active{
      bgp('~@/assets/two/search.png');
      background-size: rem(30) rem(30);
    }
  }
}
// #search {
//   position: relative;
//   background: #fff;
//   padding: 0 .4rem;
//   margin: 0 auto;
//   text-align: center;
//   height: 0.906667rem;
//   font-size: 0;
//   .search {
//     text-indent: 0.4rem;
//     width: 100%;
//     height: 100%;
//     line-height: 0.906667rem;
//     background-color: #f1f1f1;
//     border: none;
//     border-radius: 0.453333rem;
//     font-size: 0.346667rem;
//     color: #222;
//     box-sizing: border-box;
//     padding-right: 1.2rem;
//   }
//   input:-ms-input-placeholder {
//     color: #b5b5b5;
//   }
//   .searchicon {
//     width: 0.4rem;
//     height: 0.4rem;
//     position: absolute;
//     top: 0.26rem;
//     right: 0.733333rem;
//     color: #b5b5b5;
//     z-index: 99;
//   }

//   .van-ellipsis {
//     overflow: hidden;
//     text-overflow: clip !important;
//   }
//   .imgBox {
//     height: 0.4667rem;
//     width: 0.4667rem;
//     position: absolute;
//     right: 0.4rem;
//     top: 0.4rem;
//     img {
//       display: block;
//       width: 100%;
//       height: 100%;
//     }
//   }
// }
</style>
